<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>大屏焦点图</title>
     <style type="text/css">
         *{margin: 0;padding: 0;border: 0;list-style: none;}
         .banner{  width: 100%;  height: 380px;  background: pink; overflow: hidden;position: relative;}
         .banner ul{  width: 500%;  height: 380px;  position: absolute;  left: 0;  top: 0; z-index: 1;}
         .banner li{width: 20%;  height: 380px;  background:url("images/1.jpg") no-repeat center center;  float: left;  }
         .banner p{  width:1000px;  margin:0 auto;  z-index:2;  position: relative;  background: pink;  }
         .banner span{  font-size:160px;  color: #fff;  font-weight: bold;  font-family: '宋体';  margin-top: 90px;  display: block;cursor: pointer;  }
         .left{  float: left; }
         .right{  float: right; }
     </style>
    <script src="jquery-1.7.2.min.js"></script>
    <script>
        $(function () {
            // 1.批量处理图片
            $('.banner li').each(function (index, element) {
                var i = index + 1;
                $(element).css({
                    background: 'url(images/' + i + '.jpg) no-repeat center center'
                })
            })
            // 2.计时器滚动
            var timer = null;
            var num = 0;
            function gogo() {
                timer = setInterval(function () {
                    num++;
                    if (num > 4) {
                        num = 0;
                    }
                    $('.banner ul').animate({left: (num * -100) + '%'})
                }, 1000)
            };
            gogo();


            $('.banner').hover(function(e) {
                clearInterval(timer);
            },function(){
                gogo();
            });


            $('.banner .left').click(function(){
                num--;
                if (num < 0) {
                    num = 4;
                }
                $('.banner ul').stop().animate({left: (num * -100) + '%'})
            })

            $('.banner .right').click(function(){
                num++;
                if (num > 4) {
                    num = 0;
                }
                $('.banner ul').stop().animate({left: (num * -100) + '%'})
            })

        });
    </script>
</head>
<body>
<div class="banner">
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <p>
        <span class="left">&lt;</span>
        <span class="right">&gt;</span>
    </p>
</div>
</body>
</html>